<template>
  <a-card :bodyStyle="{display:'flex',padding:'0px'}" 
  style="margin:5px;"
  class=""
  >
    <div slot="title" class="title">
      <!-- <span>样本管理</span> -->
      <template v-if="rowSelectionOpen">
        <a-icon style="position: absolute;right: 60px;" 
          :class="`anticon-${this.selecteRowKeys.length? 'ok anticon-action':'no'} `"
          title="提交" 
          @click="submitAction" 
          type="check"
        />
        <a-icon style="position: absolute;right: 20px;" class="anticon-ok anticon-action"
          title="取消" 
          @click="rowSelectionOpen = false;selecteRowKeys=[]" 
          type="close"
        />
      </template>
      <template v-else>
        <a-icon style="position: absolute;right: 100px;" class="anticon-ok anticon-action"
          title="下载样本集"
          @click="rowSelectionOpen=true;tag=1"
          type="download" 
        />
        <a-icon style="position: absolute;right: 60px;" class="anticon-ok anticon-action"
          title="删除样本集"
          @click="rowSelectionOpen=true;tag=0"
          type="delete" 
        />
        <a-icon style="position: absolute;right: 20px;" class="anticon-ok anticon-action"
          title="添加样本集" 
          @click="openModal" 
          type="plus" 
        />
      </template>
    </div>
    <a-table
      :loading="!isOk"
      :columns="columns"
      :data-source="sampleList"
      :rowKey="(record,index) => JSON.stringify({id:record.id,name:record.title,index})"
      :bordered="true"
      :rowSelection="rowSelectionOpen? {
        selectedRowKeys:selecteRowKeys,
        onChange:(selectedRowKeys) => {selecteRowKeys = selectedRowKeys},
      }:null"
      :pagination="false"
      :locale="{filterConfirm: '确认',filterReset: '重置'}"
      :scroll="{y:'calc(100vh - 131px)'}"
      :customRow="rowClick"
      :rowClassName="(record) => { 
        const {title,description} = record.edit
        return title||description? 'selected' : 'normal' }"
      @change="handleTableChange"
    >
      <template slot="name" slot-scope="value,item"
      >
        <a-input v-if="item.edit.title" 
        :defaultValue="value"
        @pressEnter="(e)=>{ changeMessage(e,item,'title') }"
        />
        <span 
         @dblclick.stop = "item.edit.title = !item.edit.title"
         v-else>{{value}}</span>
      </template>
      <template slot="desc" slot-scope="value,item">
        <a-input v-if="item.edit.description" 
        :defaultValue="value"
        @pressEnter="(e)=>{ changeMessage(e,item,'description') }"
        />
        <span
         @dblclick.stop = "item.edit.description = !item.edit.description"
         v-else>{{value}}</span>
      </template>
      <span slot="target" slot-scope="value,item">
        <a-tooltip 
          v-if="value.length"
          :title="'│ '+value.join(' │ ')+' │'"
        >
          <span style="cursor: pointer;color:green;text-decoration:underline;text-underline-position: under;" >
            true
          </span>
        </a-tooltip>
        <span v-else style="color:red;text-decoration:underline;text-underline-position: under;">false</span>
      </span>
      <span
        slot="type" 
        slot-scope="value,item" 
        :style="`color:${value?'blue':'#00abff'}`"
      >
        {{value?'报文组抽取':'用户导入'}}
      </span>
      <template slot="info" slot-scope="item">
        <a-tooltip
          v-if="item.type"
          :overlayStyle="{maxWidth:'none'}"
        >
          <div slot="title">
            <p>抽取类型:{{chooseTypes[item.confInfo.chooseType].title}}</p>
            <p>抽取报文组:│ {{item.confInfo.rootName.join(' │ ')}} │</p>
            <p>抽取数量:{{item.confInfo.chooseNum}}</p>
          </div>
          <span style="text-decoration:underline;text-underline-position: under;">数据总量:{{item.confInfo.chooseNum}}</span>
        </a-tooltip>
        <a-tooltip v-else :overlayStyle="{maxWidth:'none'}">
          <div slot="title">
            <p>文件名称:{{item.fileInfo.fileName}}</p>
            <p>数据总量:{{item.fileInfo.total.value}}</p>
          </div>
          <span style="text-decoration:underline;text-underline-position: under;">数据总量:{{item.fileInfo.total.value}}</span>
        </a-tooltip>
      </template>
    </a-table>


    <a-modal
      :visible="visible"
      @cancel="downModal"
      :bodyStyle="{display:'flex',position:'relative'}"
      :width="(sampInfo.type===0 && sheets.length && fileInfo.open)?'90%':'520px'"
    >
      <template slot="title">
        <div class="title-icon" style="margin-left: 0px;">
          <span style="margin-right: 20px;font-size: 17px;">添加样本集</span>
          <!-- <span 
          :style="{color:sampInfo.type===Number(!index)?'#000':'rgba(0, 0, 0, 0.3)'}"
          v-for="(item,index) in ['抽取','上传']"
          class="change-by" 
          @click="sampInfo.type = Number(!index)"
          title="切换分组"
          >{{item}}</span> -->
          <a-button-group>
            <a-button :disabled="sampInfo.type==1" :type="sampInfo.type==0?'link':'primary'" @click="sampInfo.type =1" size="small" > <a-icon type="left" />抽取</a-button>
            <a-button :disabled="sampInfo.type==0" :type="sampInfo.type==1?'link':'primary'" @click="sampInfo.type =0" size="small" >上传<a-icon type="right" /> </a-button>
          </a-button-group>
        </div>
      </template>
      <template slot="footer">
        <a-button @click="downModal">
          取消
        </a-button>
        <a-button type="primary" ghost :loading="confirmLoading" @click="handleOk">
          确认
        </a-button>
      </template>
      <div style="width: 0;flex: 1;">
        <div class="modal-body-div">
          <span style="font-weight: 700;">基本信息:</span>
        </div>
        <div class="modal-body-div">
          <span class="ant-form-item-required">样本集备注</span>
          <a-input v-model="sampInfo.title"
           placeholder="给样本集起个名字吧"/>
        </div>
        <div class="modal-body-div">
          <span class="ant-form-item-required">描述信息</span>
          <a-input :titme="sampInfo.description" v-model="sampInfo.description" placeholder="描述一下数据集吧" />
        </div>
        <div class="modal-body-div">
          <span class="ant-form-item-required">上传时间</span>
          <a-input v-model="sampInfo.time" disabled/>
        </div>
        <!-- 抽取 -->
        <template v-if="sampInfo.type===1">
          <div class="modal-body-div">
            <span style="font-weight: 700;">抽取配置:</span>
          </div>
          <div class="modal-body-div">
            <span class="ant-form-item-required">抽取报文组</span>
            <a-select
              mode="multiple" 
              show-search 
              placeholder="选择抽取报文组" 
              option-filter-prop="children"
              style="width: 100%" 
              :filter-option="true" 
              v-model="confInfo.rootId"
            >
              <a-select-option 
              v-for="item in dataList" 
              :disabled="!item.info.analysis" 
              :value="item.id" >
                {{item.name}}
                {{!item.info.analysis?'(未解析)':''}}
              </a-select-option>
            </a-select>
          </div>
          <div class="modal-body-div">
            <span class="ant-form-item-required">抽取方式</span>
            <a-select
              show-search
              placeholder="选择抽取方式"
              option-filter-prop="children"
              style="width: 100%"
              :filter-option="true"
              v-model="confInfo.chooseType"
            >
              <a-select-option 
                v-for="item in chooseTypes" 
                :value="item.id"
              >
                {{item.title}}
              </a-select-option>
            </a-select>
          </div>
          <div class="modal-body-div">
            <span class="ant-form-item-required">抽取数量</span>
            <div style="flex: 4;display: flex;align-items: center;">
             <a-input-number 
             style="width: 100%;" 
             placeholder="要抽取的数量"
             v-model="confInfo.chooseNum" 
             :min="1" 
             :max="chooseMaxNum" 
             />
              <span>max:{{chooseMaxNum}}</span>
            </div>
          </div>
        </template>
        <!-- 导入 : 导入ing-->
        <template v-else-if="sampInfo.type === 0">
          <div class="modal-body-div">
            <span style="font-weight: 700;">上传样本:</span>
          </div>
          <div class="modal-body-div">
            <span class="ant-form-item-required">选择文件</span>
            <div 
            style="display: flex;justify-content: space-between;align-items: center;">
              <a-upload 
              class="file-upload" 
              :file-list="fileList" 
              :remove="()=>{fileList=[]}" 
              :before-upload="beforeUpload" 
              accept=".xlsx,.csv" 
              >
                <div class="anticon anticon-ok" style="zoom: 1;" :title="fileList && fileList.length? '更换文件':'选择文件'" >
                  <a-icon type="file-add" />
                  <span class="file-name">{{fileList && fileList.length? fileList[0].name:'添加文件'}}</span>
                </div>
              </a-upload>
              <a-dropdown class="file-sheets"  v-if="sheets.length">
                <span class="ant-dropdown-link" style="font-weight: 700;">
                  <span>sheets: </span>
                  <a @click="e => e.preventDefault()">{{sheets[current].sheet}}<a-icon type="down" /></a>
                </span>
                <a-menu slot="overlay">
                  <a-menu-item 
                  :disabled="item.import"
                  v-for="(item,index) in sheets" 
                  @click="chooseSheets(index)"
                  >
                    <span>{{item.sheet}}</span>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>
            </div>
          </div>
          <!-- 选择了文件 -->
          <template v-if="sheets.length">
            <div class="modal-body-div">
              <span class="ant-form-item-required">数据预览</span>
              <div>
                <a-switch v-model="fileInfo.open" style="margin-right: 5px;" />
              </div>
            </div>
            <div class="modal-body-div">
              <span class="ant-form-item-required">包含标题</span>
              <a-radio-group @change="firstChange" name="radioGroup" v-model="fileInfo.first" style="margin-right: 5px;flex:4" >
                <a-radio :value="true">是</a-radio>
                <a-radio :value="false">否</a-radio>
              </a-radio-group>
            </div>
            <div class="modal-body-div">
              <span class="ant-form-item-required">自定义标题</span>
              <div style="width: 0;flex: 4;display: flex;align-items: center;">
                <a-switch v-model="fileInfo.self" :disabled="!fileInfo.first" style="margin-right: 5px;" />
                <div v-if="fileInfo.self" ref="scrollDiv" style="display: flex;overflow-x: scroll;" @scroll="titleScroll" >
                  <a-input style="width: 100px;" v-for="(item,index) in fileInfo.columnsList" v-model="item.title" 
                  :ref="`title-${index}`" 
                  @keyup.native.up="getFocus(`title-${index+1}`)"
                  @keyup.native.down="getFocus(`title-${index+1}`)" 
                  @keyup.native.enter="getFocus(`title-${index+1}`)"
                  placeholder="自定义标题" />
                </div>
              </div>
            </div>
            <div class="modal-body-div">
              <span class="ant-form-item-required">目标变量</span>
              <a-select
                mode="multiple"
                placeholder="目标变量"
                style="width: 100%"
                v-model="fileInfo.targetRow"
              >
              <!-- @change="(value) => {fileInfo.targetRow = value}" -->
                <a-select-option 
                v-for="(item,index) in (fileInfo.self? fileInfo.columnsList:columnsList[current])" 
                :key="item.title">
                  {{item.title}}
                </a-select-option>
              </a-select>
            </div>
            <div class="modal-body-div">
              <span class="ant-form-item-required">数据总量</span>
              <a-input v-model="fileInfo.total" disabled/>
            </div>
          </template>
        </template>
      </div>
      <!-- 数据预览 -->
      <div id="resize" 
      v-show="sampInfo.type==0 && fileList.length && fileInfo.open"
      :style="{
        left:`calc(100% - 60% + ${resizeDifferWidth}px)`,
        zIndex:(sampInfo.type===0 && sheets.length && fileInfo.open)?'9999':'-1',
        }"
      > </div>
      <div 
      :style="{width:`calc(60% - ${differWidth}px)`}" 
      v-if="sheets.length"
      v-show="sampInfo.type===0 && fileInfo.open"
      >
        <a-table
          ref="scrollTable"
          :columns="fileInfo.self? fileInfo.columnsList:columnsList[current]"
          :data-source="tableData[current]"
          :rowKey="item => item.id"
          :bordered="true"
          :pagination="false"
          :scroll="{y:445-35,x:columnsList[current].length*100}"
        >
        </a-table>
      </div>
    </a-modal>
  </a-card>
</template>

<script>
import { mapGetters,mapActions } from 'vuex'
import { 
  RANDOM,
  exportFile,
  groupBy,
  dateFormat,
  getWeekday,
} from '@/utils/functions'
import { 
  getSampleList,
  addSample,
  deleteSample,
  changeSampleInfo,
  uploadSampleFile,
  exportSample
} from '@/axios/api'

export default{
  data(){
    return{
      resizeDifferWidth:0,
      differWidth:0,
      sampleList:[],//id,rootId,title,time
      tag:1,//0:删除  1:下载
      visible:false,
      confirmLoading:false,
      chooseTypes:[
        {id:0,title:"随机抽取"},
      /*  {id:1,title:"抽取方式二"},
        {id:2,title:"抽取方式三"},
        {id:3,title:"抽取方式四"} */
      ],
      fileList:[],
      tableData:[],
      current:0,
      columnsList:[],
      sheets:[],
      csvData:[],
      fileInfo:{},
      confInfo:{},
      sampInfo:{},
      chooseMaxNum:0,
      isOk:false,
      columns:[{
        title:'样本集备注',
        dataIndex:'title',
        ellipsis:true,
        align:'left',
        width:150,
        sorter: (a, b) => a.title.localeCompare(b.title),
        scopedSlots: {customRender: 'name'}
      },{
        title: '上传时间',
        dataIndex:'time',
        ellipsis:true,
        sorter: (a, b) => new Date(a.time) - new Date(b.time),
        width:150,
      },{
        title:'目标变量',
        ellipsis:true,
        width:140,
        dataIndex:'targetRow',
        sorter: (a, b) => a.targetRow.length - b.targetRow.length,
        filters:[
          { text: '包含目标变量', value: 1 },
          { text: '不含目标变量', value: 0 },
        ],
        onFilter: (value, record) => Boolean(record.targetRow.length) === Boolean(value),
        scopedSlots: {customRender: 'target'}
      },{
        title: '类型',
        dataIndex: 'type',
        ellipsis:true,
        width:110,
        filters:[
          { text: '用户导入', value: 0},
          { text: '报文组抽取', value: 1},
        ],
        onFilter: (value, record) => record.type === value,
        scopedSlots: {customRender: 'type'}
      },{
        title: '样本集信息',
        ellipsis:true,
        sorter:(a, b) => this.getNum(a) - this.getNum(b),
        width:140,
        scopedSlots: {customRender: 'info'},//插槽
      },{
        title: '描述',
        dataIndex:'description',
        ellipsis:true,
        scopedSlots: {customRender: 'desc'}
      }],
      rowClick:record => ({
        on: {
          dblclick:()=>{
            const {title,description} = record.edit
            console.log({title,description})
            if(title || description)
              record.edit = {title:false,description:false}
            if(!title && !description)
              record.edit = {title:true,description:true}
          }
        }
      }),
      getNum:e=>e.type? e.confInfo.chooseNum:e.fileInfo.total.y,
      rowSelectionOpen:false,
      selecteRowKeys:[],
    }
  },
  created(){
    getSampleList().then(e=>{
      console.log(e)
      const {sampleList} = e.data
      sampleList.map(e=>{
        e.edit={title:false,description:false}
        if(e.fileInfo){
          const {total} = e.fileInfo
          const X_Y = total.match(/\d+/g)
          e.fileInfo.total = {value:total,x:X_Y[0],y:X_Y[1]}
        }
      })
      this.sampleList = sampleList
    }).catch(e=>{}).then(e=>{this.isOk = true})
  },
  watch:{
    "fileInfo.open":function(newV,oldV){
      this.resize(newV)
    },
    "confInfo.rootId":function(rootId,oldV){
      //是抽取
      if(!this.sampInfo.type) return
      if (!rootId.length) {
        this.chooseMaxNum = 0
        return
      }
      this.chooseMaxNum = rootId.map(id=>{
        let { total } = this.dataList.find(e=>e.id==id)
        if(!total || typeof total != 'number') total = 0
        return total
      }).reduce((a,b)=>a+b)
    }
  },
  computed:{
    ...mapGetters(['dataList']),
  },
  methods:{
    getWeekday,groupBy,
    changeMessage(e,item,attr){
      const {_value} = e.srcElement || e.target
      const source = item[attr]
      if (_value === source) { item.edit[attr] = false;return }
      const {id} = item
      this.$message.loading({content:"修改中...",duration:0,key:`LOADING${id}`})
      changeSampleInfo({id,key:attr,value:_value}).then(e=>{
        this.$message.success({content:"修改成功",key:`LOADING${id}`})
        item[attr] = _value
        item.edit[attr] = false
      }).catch(()=>{
        this.$message.error({content:"修改失败",key:`LOADING${id}`})
      })/* .then(()=>{}) */
    },
    submitAction(){//下载或删除
      if(this.selecteRowKeys.length === 0) return 
      const params = this.selecteRowKeys.map(e=>JSON.parse(e))
      let actionFun
      let sign = true //标记是否全部成功
      if(this.tag === 1){//下载
        actionFun = async () => {
          const link = document.createElement('a')
          link.style.display = 'none'
          document.body.appendChild(link)
          for (let i=this.selecteRowKeys.length-1; i>=0; i--){
            const params = JSON.parse(this.selecteRowKeys[i])
            console.log(params)
            const {id,name} = params
            await exportSample({id})
                  .then(e=>{
                    if(Object.prototype.toString.call(e)!='[object Blob]'){
                      this.$message.warn(`请求返回值异常`)
                      throw new Error('No Blob')
                    }else{
                      const blob = new Blob([e],{type: 'application/csv'})
                      const url = window.URL.createObjectURL(blob)
                      this.$message.success({content:`${name} - 导出成功`,key:"EXPORT_MESSAGE"})
                      const fileName = `样本集-${name}.csv`
                      exportFile(url,fileName)
                      this.selecteRowKeys.splice(i,1)//取消选中
                    }
                  })
                  .catch(e=>{
                    console.log(e)
                    sign = false
                  })
          }
          document.body.removeChild(link);
        }
      }
      else if(this.tag === 0){//删除
        actionFun = async () => {
          for (let i=this.selecteRowKeys.length-1; i>=0; i--){
            const params = JSON.parse(this.selecteRowKeys[i])
            const {id,name,index} = params
            await deleteSample({id})
                  .then(e=>{
                    // const index = this.sampleList.findIndex(e=>e.id === id)
                    this.sampleList.splice(index, 1)
                    this.$message.success({content:`${name} - 删除成功`,key:"DEL_MESSAGE"})
                    this.selecteRowKeys.splice(i,1)
                  })
                  .catch(e=>{
                    sign = false
                  })
          }
        }
      }
      const key = RANDOM(15)
      this.$message.loading({content:`样本集${this.tag? '下载':'删除'}中`,duration:0,key})
      actionFun().then(e=>{
        this.$message.success({content:`样本集${this.tag? '下载':'删除'}完成`,duration:1,key}).then(()=>{
          if(sign) this.rowSelectionOpen = false
        })
      })
    },
    firstChange(){//包含第一行？
      console.log(this.fileInfo)
      const {first} = this.fileInfo
      if(first){
        const data = Object.values(this.tableData[this.current].shift())
        this.columnsList[this.current].map((e,index)=>{
          e.title = data[index]
        })
      }else{
        const data = {}
        this.columnsList[this.current].map(e=>{
          const {title} = e
          e.title = ''
          data[title] = title
        })
        data.id = RANDOM(10)
        this.tableData[this.current].unshift(data)
        this.fileInfo.self = true
      }
    },
    sortFun(key){
      switch(key){
        case 0: 
          return e=>e.confInfo.rootId
          break
        case 1: 
          return e=>e.confInfo.chooseType
          break
        case 2: 
          return e=>Math.floor(e.confInfo.chooseNum/100)
          break
        case 3: 
          return e=>new Date(e.time).getDay()
          break
        case 4: 
          return e=>new Date(e.time).getYear()
          break
        case 5:
          return e=>new Date(e.time).getMonth()
          break
      }
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination,filters,sorter);
/*      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      }); */
    },
    downModal(){
      this.visible = false
      console.log("清除数据")
      if(this.fileList.length){
        this.current = 0
        this.sampInfo = {}
        this.fileInfo = {}
        this.confInfo = {}
        this.fileList = []
        this.sheets = []
        this.tableData = []
        this.columnsList = []
        this.csvData = []
      }
    },
    openModal(){//打开
      this.sampInfo = {
        title: `样本集-${new Date()-1}`,
        time:dateFormat('Y-M-D h:m:s',new Date()),
        description:"***",
        type:1
      }
      this.visible = true
    },
    handleOk(e) {
      this.confirmLoading = true
      const {id,title,description,type} = this.sampInfo
      let addFuntion
      console.log(title,description)
      if(type === 0 && !this.fileList.length){//上传文件
        addFuntion = ()=>{this.$message.error("请选择文件");return Promise.reject()}
      }else if(type === 0 && this.fileList.length){//上传文件
        const {current,fileInfo,csvData} = this
        const {first,self,targetRow,total} = fileInfo
        let data = csvData[current]
        if(self){
          const firstdata = this._cloneDeep(fileInfo.columnsList).map(e=>e.title).join(",")
          if(first) data = data.slice(data.indexOf('\n')+1)
          data = firstdata + '\n' + data
        }
				const fileName = this.fileList[0].name
        // title,description
        console.log(targetRow)
        const POST_DATA = {title:title.trim(),fileName,total,description,targetRow,data}
        const ok = Object.values(POST_DATA).every(e=>{
          return e? true:false
        })
        addFuntion = ok?() => uploadSampleFile(POST_DATA).then(e=>{
          this.sheets[current].import = true
          // const {tableData,columnsList} = this//*都可以
          const allImport = this.sheets.every((e,i)=>{
            if(!e.import){
              this.chooseSheets(i)
             // this.$nextTick(()=>{
             //    delete tableData[current]
             //    delete columnsList[current]
             //    delete csvData[current]
             //  })
              return false
            }
            return true
          })
          if(allImport) this.downModal()
          return e
        }):()=>{this.$message.error("补全信息");return Promise.reject()}
      }else if(type === 1){//抽取样本
        const {rootId,chooseType,chooseNum} = this.confInfo
        const POST_DATA = {title:title.trim(),description,rootId,chooseType,chooseNum}
        const ok = Object.values(POST_DATA).every(e=>{
          return e !== undefined && e!=='' && JSON.stringify(e)!=='[]'? true:false
        })
        addFuntion = ok?() => addSample(POST_DATA).then(e=>{
          if(this.fileList.length) this.sampInfo.type=0
          else this.downModal()
          return e
        }):()=>{this.$message.error("补全信息");return Promise.reject()}
      }
      addFuntion().then(e=>{
				console.log(e)
        const {sample} = e.data
        sample.edit={title:false,description:false}
        this.sampleList.unshift(sample)
        this.$message.success("添加成功")
      }).catch(()=>{}).then(()=>{this.confirmLoading = false})
    },
    beforeUpload(file) {
      this.fileList = [file]
      const fileReader = new FileReader()
      fileReader.onload = ev=>{
        try {
          var XLSX = require("xlsx");
          var data = ev.target.result
          var workbook = XLSX.read(data, {
            type: 'binary'
          })
          this.tableData = []
          this.columnsList = []
          this.csvData = []
        } catch (e) {
          this.$message.error('文件类型不正确');
          return;
        }
        const {SheetNames,Sheets} = workbook
        this.sheets = []
        for (const sheet in Sheets) 
          if (Sheets.hasOwnProperty(sheet)){
            const fromTo = Sheets[sheet]['!ref'] //位置
            if(fromTo){
              this.sheets.push({
                sheet,
                import:false,
              })
              const data = XLSX.utils.sheet_to_json(Sheets[sheet])
              const csvdata = XLSX.utils.sheet_to_csv(Sheets[sheet])
              const columns = Object.keys(data[0]).map(e=>{
                return{
                  title:e,
                  dataIndex:e,
                  ellipsis:true,
                  align:'center',
                  width:'100px'
                }
              })
              data.map(e=>e.id = e.__rowNum__)
              this.tableData.push(data)
              this.columnsList.push(columns)
              this.csvData.push(csvdata)
            }
          }
        this.chooseSheets(0)
      }
      fileReader.readAsBinaryString(file)
      return false
    },
    chooseSheets(index){
      this.current = index
      const columnsList = JSON.parse(JSON.stringify(this.columnsList[index]))
      this.sampInfo = {
        title: `样本集-${new Date()-1}`,
        time:dateFormat('Y-M-D h:m:s',new Date()),
        description:"***",
        type:0
      } 
      this.fileInfo = {
        first:true,
        self:false,
        open:false,
        total:`[${this.columnsList[index].length}×${this.tableData[index].length}]`,
        targetRow:[],
        columnsList,
      }
    },
    titleScroll(e){
      if(!this.fileInfo.open) return
      const {scrollLeft,scrollRight} = this.$refs.scrollDiv
      const tableDom = document.querySelector(".ant-modal-body .ant-table-body")
      tableDom.scrollLeft = scrollLeft
    },
    resize(tag){
      const resizeDom = document.getElementById('resize')
      if (tag)
        resizeDom.onmousedown = e =>{
          const rightShow = this.sheets.length && this.fileInfo.open && this.sampInfo.type===0
          if(!rightShow)
            return false
          const startX = e.clientX - this.differWidth;
          resizeDom.style.borderLeft="2px dotted"
          document.onmousemove = e =>{
            const {clientX} = e 
            if(clientX>=150 && clientX<=window.innerWidth-150 && rightShow)
              this.resizeDifferWidth = clientX - startX
          }
          document.onmouseup = e =>{
            resizeDom.style.borderLeft="none"
            this.differWidth = this.resizeDifferWidth
            document.onmousemove = null;
            document.onmouseup = null; 
            resize.releaseCapture && resize.releaseCapture();
          }
          resize.setCapture && resize.setCapture();
          return false
        }
      else resizeDom.onmousedown = null
    },
    getFocus(ref){
      const dom = this.$refs[ref]
      if(dom) dom[0].focus()
    },
  }
}
</script>

<style lang="less" scoped>
@titleHeight:40px;
.samples{
  display: flex;
  align-content: flex-start;
  flex-flow: wrap;
  width: 100%;
  height: 100%;
  &-move {
    transition: transform 1s;
  }
  .ant-card-grid{//小块块
    padding: 12px;
    cursor: pointer;
    >div{
      text-align: left;
      display: flex;
      flex-direction: column;
      overflow-y: scroll;
      overflow-x:hidden;
      height: 100%;
    }
  }
}
.file{
  &-upload{
    ::v-deep .ant-upload-list{//上传文件列表
      display:none;
    }
  }
  &-name{
    font-weight: 700;
  }
}
/deep/.ant-card-head{
  height: @titleHeight;
  min-height: @titleHeight;
  display: flex;
  font-weight: 700;
  .title{
    display: flex;
    align-items: center;
  }
}
.title-icon{
  margin-left: 50px;
  .change-by{
  margin-left: 5px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
    &:hover{
      color: #1890ff !important;
    }
  }
}
/deep/.ant-card-body{
  height: calc(100vh - @titleHeight - 56px);
  overflow-y: scroll;
}
/deep/.ant-modal-title{
  font-weight: 700;
}

.ant-btn-link[disabled]{
  color:#1890ff !important;
}
.ant-btn-primary[disabled]{
  color:#fff !important;
	background: #1890ff !important;
}
</style>